<template>
  <div class="houselist">
    <!-- 列表（新房/二手房/商铺）页面 -->
    <div class="houselist-header">
      <!-- search头部搜索 -->
      <van-icon name="arrow-left" size="20px" color="#777" @click="Return"/>
      <!-- <i class="iconfont icon-zuo" @click="Return"></i> -->
      <van-search v-model="input" @search="onSearch" placeholder="请输入楼盘名称" />
      <!-- <input type="text" v-model="input" @search="onSearch" placeholder="请输入搜索关键词" /> -->
      <span @click="goMaphouse">地图找房</span>
    </div>
    <div class="nav1">
      <!-- 筛选数据 -->
      <van-dropdown-menu>
        <!-- @change=""handleChange" -->
        <van-dropdown-item v-model="value1" :options="option1" @change="handleArea" />
        <van-dropdown-item v-model="value2" :options="option2" @change="handlePrice" />
        <van-dropdown-item v-model="value3" :options="option3" @change="handleType" />
        <van-dropdown-item title="更多">
          <ul>
            <li>
              <b>排序</b>
              <van-row type="flex" justify="space-around">
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
              </van-row>
            </li>
            <li>
              <b>特色</b>
              <van-row type="flex" justify="space-around">
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
              </van-row>
            </li>
            <li>
              <b>状态</b>
              <van-row type="flex" justify="space-around">
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
              </van-row>
            </li>
            <li>
              <b>装修</b>
              <van-row type="flex" justify="space-around">
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
                <van-col span="8">span: 8</van-col>
              </van-row>
            </li>
          </ul>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <div class="main">
      <dl v-for="(item,index) in list" :key="index" class="classifyType-item">
        <dt>
          <img :src="item.img" alt @click="godetails(item)" />
        </dt>
        <dd>
          <p class="p1">
            <span>{{item.state}}</span>
            <b>{{item.listingTitle}}</b>
          </p>
          <p class="p2">
            <span>{{item.area}}</span>|
            <span>建面:{{item.houseArea}}</span>
          </p>
          <p class="p3">
            <span>{{item.sellingprice}}元/㎡</span>
          </p>
          <p class="p4">
            <span class="span1">{{item.fitment}}</span>
            <span>{{item.stateType}}</span>
            <span>{{item.fitmentType}}</span>
          </p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
import { getoldhome, getarea, getPrice, getType } from "@/api/index.js";
export default {
  data() {
    return {
      input: "",
      list: [],
      value: "",
      value1: 0,
      value2: 0,
      value3: 0,
      option1: [
        { text: "区域", value: 0 },
        { text: "天津市", value: "天津市" },
        { text: "宿迁市", value: "宿迁市" },
        { text: "重庆市", value: "重庆市" },
        { text: "杭州市", value: "杭州市" }
      ],
      option2: [
        { text: "价格", value: 0 },
        { text: "不限", value: "不限" },
        { text: "5千以下", value: "1-5000" },
        { text: "5千~1万", value: "5000-10000" },
        { text: "1万~2万", value: "10000-20000" },
        { text: "2万以上", value: "20000-30000" }
      ],
      option3: [
        { text: "类型", value: 0 },
        { text: "中式", value: "中式" },
        { text: "欧式", value: "美式" },
        { text: "北欧", value: "北欧" }
      ],
      arealist: []
    };
  },
  created() {
    this.getoldhome();
  },
  methods: {
    //获取list数据
    getoldhome() {
      console.log(this.input);
      getoldhome({ params: { classifyType: 1, keyWord: this.input } }).then(
        res => {
          this.list = res.data.data;
          console.log(res.data);
        }
      );
    },
    onSearch() {
      console.log(2);
      this.getoldhome();
    },
    //筛选区域
    handleArea(value) {
      getarea({ detailAddress: value }).then(res => {
        this.list = res.data.data;
      });
    },
    //筛选价格
    handlePrice(value) {
      getPrice({ sellingprice: value }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    //筛选类型
    handleType(value) {
      getType({ fitmentType: value }).then(res => {
        this.list = res.data.data;
        console.log(res);
      });
    },
    goMaphouse() {
      this.$router.push("/maphouse");
    },
    //返回上一级
    Return() {
      this.$router.push("/main");
    },
    //  跳转详情页
    godetails(item) {
      this.$router.push({
        path: `/detail/${item.id}`,
        query: { area: item.area }
      });
    }
  }
};
</script>

<style scoped>
.houselist {
  width: 100%;
  height: 100%;
}
.houselist-header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 15px;
  margin-bottom: 5px;
  /* background: skyblue; */
}
.van-icon-arrow-left{
  line-height: 50px;
}
.van-search__content--square {
  background: none;
  border: 1px solid #ccc;
  border-radius: 30px;
}
.main {
  width: 100%;
  height: auto;
  padding: 0 15px;
}
dl {
  display: flex;
  padding: 0 15px;
}
dl > dt {
  margin-right: 15px;
}
dl > dt > img {
  width: 100px;
  height: 100px;
}
.p1 > span {
  background: #ccc;
  margin-right: 5px;
  margin-right: 5px;
}
.p2 {
  margin: 5px 0;
}
.p2 > span {
  border: none;
  margin-right: 5px;
}
.p3 {
  margin-bottom: 5px;
}
.p3 > span {
  border: none;
}
</style>